<template>
  <div>
    <div class="videos_header">
      <div class="videos" v-for="item in props.videosList">
        <img :src="item.cover">
        <div class="info-box">
          <a>{{item.title}}</a>
          <div class="price-box">
            <div class="price">{{item.moreBackup.actualPrice}}</div>
            <div class="view-number">{{utils.toTenThousand(item.statisticsBackup.viewCount)}}W人浏览</div>
          </div>
          <div>
            <span class="vip">会员免费</span>
          </div>
          <div class="stars">
            <span class="iconfont icon-dianzan">{{item.statisticsBackup.praiseCount}}</span>
            <span class="iconfont icon-xiaoxi1">{{item.statisticsBackup.commentCount}}</span>
            <span class="iconfont icon-shoucang">{{item.statisticsBackup.favoriteCount}}</span>
          </div>
        </div>
        <div class="author">
          <div class="left">
            <el-avatar :size="24" :src="item.creatorBackup.avatar" />
            <span class="name">{{item.creatorBackup.name}}</span>
          </div>
          <span>{{utils.timer(item.onsellTime)}}</span>
        </div>
      </div>
    </div>
    <div class="load-more" @click="loadMore">加载更多</div>
  </div>

</template>

<script setup lang="ts">
import {ref} from "vue";
import utils from '../utils/util'
const props = defineProps(['videosList'])
const emits = defineEmits(['loadmore'])
const loadMore = () => {
  emits('loadmore')
}
</script>

<style scoped lang="less">
.videos_header{
  display: flex;
  flex-flow: row wrap;
  margin-top: 20px;
  .videos{
    width: 224px;
    height: 300px;
    justify-content:flex-start;
    margin-bottom: 20px;
    background-color: #fff;
    &:not(:nth-child(5n)) {
      margin-right: 20px;
    }
    > img {
      width: 100%;
      height: 125px;
    }

    .info-box {
      padding: 10px 10px 5px;
      border-bottom: 1px solid #ebeced;
      > a {
        display: block;
        font-size: 14px;
        min-height: 36px;
      }
      .price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          color: #f93684;
        }
        .view-number {
          color: #b1b5c1;
          font-size: 12px;
        }
      }
      .vip {
        background-color: #f93684;
        color: #fff;
        font-size: 12px;
        border-radius: 2px;
        display: inline-block;
        padding: 2px;
      }
      .stars {
        color: #b1b5c1;
        > span {
          padding-right: 18px;
          font-size: 12px;
        }
      }
    }
    .author {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 12px;
      > span {
        color: #b1b5c1;
      }
      .left {
        display: flex;
        align-items: center;
        .name {
          margin-left: 8px;
          max-width: 68px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

  }
}
.load-more {
  width: 140px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #82858e;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
</style>
